<template>
  <div>
    <nav-bar>
      <div slot="center">辅助工时申请列表</div>
    </nav-bar>
    <van-nav-bar
      class="app-nav-bar"
      title="辅助工时申请列表"
      left-arrow
      @click-left="onClickLeft()"
    />

    <div class="m-grid">
      <table border="0" cellPadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>工作内容</th>
            <th>工作用时</th>
            <th>工作频次</th>
            <th>申请</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(data, index) in applyList" :key="index">
            <td>{{ data.content }}</td>
            <td>{{ data.useTime }}</td>
            <td>{{ data.rate }}</td>
            <td>
              <button v-on:click="toApply(data)">申请</button>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <button class="myApply" v-on:click="toApply('100')">
                自定义申请
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import { getAssistTimeList } from "../../api/perfrom";
export default {
  name: "applyList",
  data() {
    return {
      applyList: [],
    };
  },
  components: {
    NavBar,
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true; 
    next();
  },
  methods: {
    getAssistTimeList() {
      getAssistTimeList()
        .then((res) => {
          this.applyList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft() {
      this.$router.push("/perform");
    },
    toApply(data) {
      this.$router.push({
        name: "applyTime",
        params: data,
      });
    },
  },
  mounted() {
    this.getAssistTimeList();
  },
  created() {},
};
</script>

<style scoped lang="less">
.myApply {
  margin: 0 auto;
}
.m-grid {
  margin-top: 136px;
}
table {
  width: 100%;
  padding: 0 5px 0 3px;
  button {
    border: 1px solid #169bd5;
    border-radius: 5px;
    padding: 7px 16px;
    border: none;
    color: #fff;
    background-color: #169bd5;
  }
}
table tr th {
  color: #646566;
  font-weight: 300;
  padding: 0.17rem 0.1rem;
  font-size: 0.4rem;
  border-bottom: 1px solid #7f7f7f;
}
table tr td {
  color: #646566;
  padding: 10px 0;
  text-align: center;
  font-size: 0.3733rem;
  border-bottom: 1px solid #7f7f7f;
}
.target-nav {
  height: 1.2266rem;
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-size: 0.4266rem;
  line-height: 1.2266rem;
  text-align: center;
}
</style>
